<template>
    <div id="panyment">
        <div class="container" v-show="!flag">
            <!-- 付款信息 -->
            <div class="pay-info">
                <span class="icon iconfont icon-queren2"></span>
                <div class="tip">
                    <p>{{ item.msg }} , 请尽快完成支付。</p>
                    <p style="display: none;">支付还剩 <span>24分59秒</span>, 超时后将取消订单</p>
                </div>
                <div class="amount">
                    <span>应付总额：</span>
                    <span>¥{{ item.amount }}</span>
                </div>
            </div>
            <!-- 付款方式 -->
            <div class="pay-type" style="text-align: center;">
                <p class="head">选择以下支付方式付款</p>
                <div class="item">
                    <!-- <p>支付平台</p> -->
                    <div :class="`pay_type_leng  ${pay_type == 1 ? 'pay_type_leng_xz' : ''}`" data-pid="47" data-rate="0.05"
                        @click="selectPay(1)">
                        <img class="img_sty" :src="wx">
                        <span class="pay_span">微信支付</span>
                        <img :class="`${pay_type == 1 ? 'xiadui' : 'hide'}`" :src="gouzi" alt="">
                    </div>
                    <div :class="`pay_type_leng  ${pay_type == 2 ? 'pay_type_leng_xz' : ''}`" data-pid="47" data-rate="0.05"
                        @click="selectPay(2)">
                        <img class="img_sty" :src="zfb">
                        <span class="pay_span">支付宝</span>
                        <img :class="`${pay_type == 2 ? 'xiadui' : 'hide'}`" :src="gouzi" alt="">
                    </div>
                    <div :class="`pay_type_leng  ${pay_type == 3 ? 'pay_type_leng_xz' : ''}`" data-pid="47" data-rate="0.05"
                        @click="selectPay(3)">
                        <img class="img_sty" :src="duigong">
                        <span class="pay_span">对公账户</span>
                        <img :class="`${pay_type == 3 ? 'xiadui' : 'hide'}`" :src="gouzi" alt="">
                    </div>
                </div>

                <div style="text-align: center;margin-top: 100px;">
                    <el-button type="primary" size="medium" @click="pay">去付款</el-button>
                </div>
            </div>
        </div>

        <!-- 微信 and 支付宝二维码 -->
        <div class="container" style="display: flex;align-items: center;justify-content: center; height: calc(100vh - 75)">
            <!-- <div style="height: 100%;"  > -->
            <div style="width: 600px;margin-top: 100px;" v-if="flag && DTime && pay_type != 3">
                <div class="ep-order-tit">
                    <div style="margin: 15px 0;">
                        <span class="pay_title">支付倒计时：</span>
                        <span style="color: #707070;font-size: 24px;">支付还剩 {{ DTime }}, 超时后将取消订单</span>
                    </div>
                </div>
                <div class="ep-order-tit">
                    <div style="margin: 10px 0;">
                        <span class="pay_title">支付订单号：</span>
                        <span style="color: #707070;"> {{ dingdanhao }}</span>
                    </div>
                </div>
                <div class="ep-order-tit" style="margin: 10px 0;"> <span class="pay_title">支付金额：
                        <em :style="`color:${pay_type == 1 ? '#00c800;' : '#3369ff'} ;`"><i>¥</i>{{ item.amount
                        }}</em></span> <a href="javascript:void(0);" class="ep-order-view " data-action="expend"><i
                            class="ep-icon ep-icon-arrow"></i></a> </div>
                <el-divider />
                <div class="pay_title" style="margin: 10px 0;">支付方式：</div>
                <div v-show="pay_type == 1" :class="`pay_type_leng  ${pay_type == 1 ? 'pay_type_leng_xz' : ''}`"
                    data-pid="47" data-rate="0.05" @click="selectPay(1)">
                    <img class="img_sty" :src="wx">
                    <span class="pay_span">微信支付</span>
                    <img :class="`${pay_type == 1 ? 'xiadui' : 'hide'}`" :src="gouzi" alt="">
                </div>

                <div v-show="pay_type == 2" :class="`pay_type_leng  ${pay_type == 2 ? 'pay_type_leng_xz' : ''}`"
                    data-pid="47" data-rate="0.05" @click="selectPay(2)">
                    <img class="img_sty" :src="zfb">
                    <span class="pay_span">支付宝</span>
                    <img :class="`${pay_type == 2 ? 'xiadui' : 'hide'}`" :src="gouzi" alt="">
                </div>

                <div v-show="pay_type == 3" :class="`pay_type_leng  ${pay_type == 3 ? 'pay_type_leng_xz' : ''}`"
                    data-pid="47" data-rate="0.05" @click="selectPay(3)">
                    <img class="img_sty" :src="duigong">
                    <span class="pay_span">对公账户</span>
                    <img :class="`${pay_type == 3 ? 'xiadui' : 'hide'}`" :src="gouzi" alt="">
                </div>
                <div style="margin-top: 20px;">
                    <div class="con channel-wechat show">
                        <div class="clearfix" style="display: flex;">
                            <div class="fl">
                                <div class="ep-qrcode-loading hide"><img
                                        src="//midas.gtimg.cn/enterprise/images/loading.gif" width="80" height="80"></div>
                                <div id="qrcode-container" ref="qrcodeDiv" style="position: relative;">

                                    <img v-if="qrcode" style="width: 40px;height: 40px;" class="centers" :src="qrcodeUrl">
                                </div>
                                <div class="ep-wxpay-qrcode-notice"
                                    :style="`background-color:${pay_type == 1 ? '#00c800;' : '#3369ff'} ;`">
                                    请打开手机{{ pay_type == 1 ? '微信' : '支付宝' }}，扫一扫完成支付</div>
                            </div>
                            <div class="fl ep-wxpay-qrcode-tip" style="margin-left: 50px;"><img :src="phoneUrl">
                            </div>

                        </div>
                        <div style="text-align: center;margin-top: 80px;">
                            <el-button type="primary" size="medium" @click="locations">已付款</el-button>
                            <el-button type="danger" size="medium" @click="reselect">重新选择</el-button>
                        </div>

                    </div>
                </div>
                <!-- </div> -->
            </div>
        </div>

        <!-- 对公账户详情 -->
        <div class="container" v-show="flag && pay_type == 3"
            style="display: flex;align-items: center;justify-content: center;">
            <div style="margin-top: 100px; width: 600px;">
                <div class="ep-order-detail">
                    <div>
                        <div class="ep-order-tit">
                            <div style="margin: 10px 0;">
                                <span class="pay_title">公司名称：</span>
                                <span style="color: #707070;"> {{ publicAccount.CompanyName }}</span>
                            </div>
                        </div>

                        <div class="ep-order-tit">
                            <div style="margin: 10px 0;">
                                <span class="pay_title">纳税人识别号：</span>
                                <span style="color: #707070;"> {{ publicAccount.IdentificationNumber }}</span>
                            </div>
                        </div>

                        <div class="ep-order-tit">
                            <div style="margin: 10px 0;">
                                <span class="pay_title">地址电话：</span>
                                <span style="color: #707070;"> {{ publicAccount.AddressTelephone }}</span>
                            </div>
                        </div>

                        <div class="ep-order-tit">
                            <div style="margin: 10px 0;">
                                <span class="pay_title">开户行：</span>
                                <span style="color: #707070;"> {{ publicAccount.BankDeposit }}</span>
                            </div>
                        </div>

                        <div class="ep-order-tit">
                            <div style="margin: 10px 0;">
                                <span class="pay_title">账号：</span>
                                <span style="color: #707070;"> {{ publicAccount.AccountNumber }}</span>
                            </div>
                        </div>

                    </div>
                </div>
                <el-divider />
                <div class="pay_title" style="margin: 10px 0;">支付方式：</div>
                <div :class="`pay_type_leng  ${pay_type == 3 ? 'pay_type_leng_xz' : ''}`" data-pid="47" data-rate="0.05">
                    <img class="img_sty" :src="duigong">
                    <span class="pay_span">对公账户</span>
                    <img :class="`${pay_type == 3 ? 'xiadui' : 'hide'}`" :src="gouzi" alt="">
                </div>
                <div style="text-align: center;margin-top: 100px;">
                    <el-button type="danger" size="medium" @click="reselect">重新选择</el-button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import { Loading } from 'element-ui';
import util from '@/assets/js/util.js'
import QRCode from 'qrcodejs2';
import zfb from '../../assets/img/zfb.png'
import wx from '../../assets/img/wx.png'
import duigong from '../../assets/img/dg.png'
import zfbphone from '../../assets/img/zfbphone.png'
import wxbphone from '../../assets/img/wxphone.jpg'
import gouzi from '../../assets/img/gouzi.png'
const startTime = Date.now(); // 获取当前时间戳
export default {
    data() {
        return {
            radio: 1,
            img_url: "",
            flag: false,
            pay_type: 1, //1微信 2支付宝
            item: {
                amount: "",
                msg: "",
                qrcode: false
            },
            pay_Time: null,
            qrcode: false,
            qrcodeUrl: '',
            zfb,
            wx,
            wxbphone,
            zfbphone,
            duigong,
            gouzi,
            phoneUrl: "",
            DTime: false,
            dingdanhao: "",
            publicAccount: {
                CompanyName: "深圳市中电核心科技有限公司",
                IdentificationNumber: "91440300312000544U",
                AddressTelephone: "深圳市宝安区航城街道鹤州社区洲石路739号恒丰工业城中控楼2层.0755-23004730",
                BankDeposit: "中国银行深圳幸福支行",
                AccountNumber: "7419 7548 5668",
            }
        }
    },
    methods: {
        //重新选择
        reselect() {
            // this.pay_type = 1
            this.flag = false
        },
        // 去支付
        async pay() {
            //对公账户不需要请求
            if (this.pay_type == 3) {
                this.flag = true
                return
            }
            this.qrcode = false
            this.qrcodeUrl = this.pay_type == 1 ? wx : zfb
            this.phoneUrl = this.pay_type == 1 ? wxbphone : zfbphone
            let res = await util.$http('/payment/paymentCheck', { pay_type: this.pay_type })
            // console.log(res)
            if (!res) {
                return clearInterval(this.pay_Time);
            }

            if (res.code == 2) {
                this.pay_type = res.pay_type
                this.$message.warning(res.msg)
                this.qrcodeUrl = this.pay_type == 1 ? wx : zfb
                this.phoneUrl = this.pay_type == 1 ? wxbphone : zfbphone

            }
            this.flag = true
            let loading = Loading.service({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0,0,0,0.2)",
            });
            this.payTime(res.expire_time)

            setTimeout(() => {
                console.log(document.getElementById('#qrcode-container'))
                console.log(this.$refs.qrcodeDiv)
                this.qrcode = new QRCode('qrcode-container', {
                    text: res.qrcode, // 二维码文本内容  
                    width: 196, // 二维码宽度（像素）  
                    height: 200, // 二维码高度（像素）  
                    colorDark: "#000000", // 前景色深  
                    colorLight: "#ffffff", // 前景色浅  
                    correctLevel: QRCode.CorrectLevel.H, // 容错级别  
                });
                loading.close()
                // this.loading = false
                // loadingInstance.close();
            }, 1100)


            this.dingdanhao = res.order_no

            // location.reload()
        },
        selectPay(i) {
            this.pay_type = i
        },
        locations() {
            this.$router.replace({ path: '/' })
            location.reload()
        },
        payTime(getTime) {
            clearInterval(this.pay_Time);
            const startTimes = Math.floor(Date.now() / 1000); // 获取当前时间戳
            let countdown = getTime ? (getTime - startTimes) : 29 * 60 + 59; //如果有返回时间戳 就接着计算剩余支付时间, 没用的话 默认倒数30分钟
            //  let countdown = 69 * 60 + 59;
            let interval = 1000;
            this.pay_Time = setInterval(() => {
                countdown -= 1;
                if (countdown < 0) {
                    clearInterval(this.pay_Time);
                    console.log("倒计时结束");
                    this.locations()
                } else {
                    // const shi = Math.floor(countdown / (60*60));
                    const minutes = Math.floor(countdown / 60);
                    const seconds = countdown % 60;
                    this.DTime = minutes + "分" + seconds + "秒"
                }
            }, interval);
        },
        subtractTime(startTime, endTime) {
            const diff = endTime - startTime;
            const minutes = Math.floor(diff / (1000 * 60));
            const seconds = diff % (1000 * 60);
            return { minutes, seconds };
        }
    },
    mounted() {
        console.log(JSON.parse(this.$route.query.DD))
        this.item = JSON.parse(this.$route.query.DD)
    }


}
</script>

<style scoped  lang="less">
.centers {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ep-order-tit {
    .rmb {
        margin: 0 8px 0 4px;

        i {
            font-size: 18px !important;
        }
    }

    span {
        em {
            color: #0ac265;
            font-weight: 400;
            font-size: 24px;
        }
    }
}

.pay_title {
    color: #000;
    font-weight: 700;
    font-size: 14px;
}

.ep-wxpay-qrcode-notice {
    height: 30px;
    width: 196px;
    line-height: 30px;
    background-color: #00c800;
    font-size: 12px;
    color: #fff;
    text-align: center;
    // margin-bottom: 20px;
    margin: 10px 0 20px 0;
}

.pay_type_leng {
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 43px;
    width: 130px;
    text-align: center;
    margin-right: 11px;
    background: #f8f8f8;
    border: 2px solid #f6f6f6;
    border-radius: 4px;
    position: relative;
    margin-bottom: 8px;
}

.xiadui {
    position: absolute;
    right: -2px;
    bottom: -1px;
    border-radius: 0 0 4px 0;
    display: block;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.pay_span {
    font-weight: 700;
    font-size: 13px;
    color: #545454;
    margin-left: 8px;
}

.pay_type_leng_xz {
    border-color: #3369ff;
}

.img_sty {
    position: relative;
    top: 6px;
    width: 21px;
}




.pay-info {
    background: #fff;
    display: flex;
    align-items: center;
    height: 240px;
    padding: 0 80px;

    .icon {
        font-size: 80px;
        color: #1dc779;
    }

    .tip {
        padding-left: 10px;
        flex: 1;

        p {
            &:first-child {
                font-size: 20px;
                margin-bottom: 5px;
            }

            &:last-child {
                color: #999;
                font-size: 16px;
            }
        }
    }

    .amount {
        span {
            &:first-child {
                font-size: 16px;
                color: black;
            }

            &:last-child {
                color: red;
                font-size: 20px;
            }
        }
    }
}

.pay-type {
    margin-top: 20px;
    background-color: #fff;
    padding-bottom: 70px;

    p {
        line-height: 70px;
        height: 70px;
        // padding-left: 30px;
        font-size: 16px;

        &.head {
            border-bottom: 1px solid #f5f5f5;
        }
    }

    .btn {
        width: 150px;
        height: 50px;
        border: 1px solid #e4e4e4;
        text-align: center;
        line-height: 48px;
        margin-left: 30px;
        color: #666666;
        display: inline-block;

        &.active,
        &:hover {
            border-color: '';
        }

        &.alipay {
            background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png) no-repeat center / contain;
        }

        &.wx {
            background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg) no-repeat center / contain;
        }
    }
}
</style>